<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="age">
        <p>{{msg}}</p>
        <!-- 随之颜值的提升，yyqx--做你男朋友--发微博官宣--微博崩了--程序员加班--滴滴司机加班 -->
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                age: 18,
                msg: '',
                colorValue: 60
            },
            watch: {
                // 侦听--监听谁就把谁的名字作为函数名.数据变化时，函数会自动执行
                age(newV, oldV) {
                    console.log(newV);
                    console.log(oldV);
                    if(newV<18) {
                        this.msg = '未成年人禁止入内！'
                    }else if(newV>=18 && newV < 60) {
                        this.msg = '你已经出是成年人，可以做成年人才能做的事情了。。'
                    }else {
                        this.msg = '光荣退休'
                    }
                }
            }
            // （一对多）侦听：数据变化时自动执行。监听着一，因为一是核心因素。
            // （多对一）计算属性：新增了一个变量，值是根据data中的数据计算出来的
            // 函数：调用几次执行几次，没有缓存
        })
    </script>
</body>
</html>